<!doctype html>
<html lang="en">
<#if login == false>
<script>
    window.location.href = '/'
</script>
</#if>
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Order History</title>
	<link rel="icon" href="${request.contextPath}/static/img/favicon.ico" type="image/x-icon"/>
	<link rel="shortcut icon" href="${request.contextPath} /static/img/favicon.ico" type="image/x-icon"/>
	<link rel="stylesheet" href="${request.contextPath}/static/css/reset.css">
	<link rel="stylesheet" href="${request.contextPath}/static/css/ins/common.css">
	<link rel="stylesheet" href="${request.contextPath}/static/css/order.css">
    <#include "../component/facebookPixel.ftl">
</head>
<body>
<#include "../header_new1.ftl">
<main>
	<section>
		<div class="container">
			<h1>Order History</h1>
			<div class="order-wrap" id="orderWrap">
				<div class="order-wrap__inner"></div>
				<div class="wrap-footer">
					<div class="wrap-footer-label" id="orderViewMore">View More</div>
<#--					<div class="wrap-footer-label">View More</div>-->
				</div>
			</div>
		</div>
	</section>
</main>
<#if isMobile == false>
    <#include "../footer_new.ftl">
</#if>
<script>
	<#--<#if isMobile == true>
    let scrollTimer
    let hasData = true

    window.addEventListener('scroll', () => {
        if (!hasData) {
            return false
        }
        if (parseInt((getScroll().top + getWindowHeight() + 200)) >= getScrollHeight()) {
            if (scrollTimer) {
                clearTimeout(scrollTimer)
            }
            scrollTimer = setTimeout(() => {
                params.page++
                getOrderList()
            }, 500)
        } else {
            if (scrollTimer) {
                clearTimeout(scrollTimer)
            }
        }
    })
	</#if>-->
	const orderParams = {
        pageSize: 10,
        page: 1
	}
    init()
	function init() {
	    getOrderList()
		initOrderEvent()
	}
	function initOrderEvent() {
	    const viewMoreEle = document.getElementById('orderViewMore')
        viewMoreEle.addEventListener('click', throttle(() => {
            orderParams.page ++
            getOrderList()
        }, 1000))
	}
	function getOrderList() {
        const wrap = document.getElementById('orderWrap')
        wrap.showLoading()
	    let url = getEncodeUrl('/v1/order', orderParams)
	    _axios.get(url).then(res => {
	        if(res.Code === 200) {
	            const wrapInner = wrap.querySelector('.order-wrap__inner')
		        if(res.Data.ItemList.length > 0) {
                    if(res.Data.TotalCount <= (orderParams.pageSize * orderParams.page)) {
                        hasData = false
                        const viewMoreEle = document.getElementById('orderViewMore')
                        viewMoreEle.hide()
                    }
                    let str = ''
                    res.Data.ItemList.forEach(item => {
                        str += '<div class="order-item">' +
                            '<div class="top">' +
                            '<div class="title">'
                        if(item.status === '0') {
                            str += '<img src="/static/img/pay_fail.png" width="26" height="26" srcset="/static/img/pay_fail@2x.png 2x" alt="">' +
                                '<span>Unpaid</span>'
                        } else {
                            str += '<img src="/static/img/pay_success.png" width="26" height="26" srcset="/static/img/pay_success@2x.png 2x" alt="">' +
                                '<span>Paid</span>'
                        }
                        str += '</div>' +
                            '<div class="info-item">' +
                            '<div class="left">Order Number:</div>' +
                            '<div class="right">#' + item.orderNumber + '</div>' +
                            '</div>' +
                            '<div class="info-item">' +
                            '<div class="left">Order Time:</div>' +
                            '<div class="right">' + item.createDate + '</div>' +
                            '</div>' +
                            '<div class="info-item">' +
                            '<div class="left">Product:</div>' +
                            '<div class="right">' + item.productName + '</div>' +
                            '</div>' +
                            '<div class="info-item">' +
                            '<div class="left">Unit:</div>'
                        if(item.type === 1) {
                            str += '<div class="right">' + item.qty + ' Credit</div>'
                        } else {
                            str += '<div class="right">' + item.qty + ' Months</div>'
                        }
                        str += '</div>' +
                            '</div>' +
                            '<div class="bottom">' +
                            '<div class="info-item">' +
                            '<div class="left">Price</div>' +
                            '<div class="right">$' + item.price + '</div>' +
                            '</div>' +
                            '</div>' +
                            '</div>'
                    })
                    wrapInner.innerHTML += str
		        } else {
		            if(orderParams.page === 1) {
                        showNoDataImg(wrap)
		            }
		        }
	        }
            wrap.hideLoading()
	    })
	}
</script>
</body>
</html>